<template>
  <div class="Room" ref="room">
    <div class="room-left" v-show="user">
      <img :src="require('@/assets/avatar/' + user.avatar)" alt />
      <p
        v-for="(item, index) in iconList"
        :key="item"
        :class="[item, { active: iconCurrentIndex === index }]"
        class="iconfont"
      ></p>
    </div>

    <div class="room-center">
      <div class="center-h">
        <p>当前用户列表</p>
        <p />
      </div>
      <div class="center-b">
        <ul>
          <li
            class="user-item"
            v-for="item in store.state.userList"
            :key="item"
          >
            <img :src="require('@/assets/avatar/three.jpeg')" alt />
            <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ item }}</span>
          </li>
        </ul>
      </div>
    </div>

    <div class="room-right">
      <div class="top_title">
        <p class="name">聊天室({{ store.state.userList.length }})</p>
        <span class="logout" @click="logout">×</span>
      </div>
      <div class="chatcontent">
        <ul class="join" ref="joinUs" :key="item">
          <!-- 当自己加入到群聊当中，只显示这一条   -->
          <li
            v-for="item in list.list"
            :class="
              item.data.from === user.name ? 'my-message' : 'other-message'
            "
          >
            <div v-if="item.type == 1" class="notes">
              {{ "欢迎 " + item.data + " 加入群聊" }}
            </div>
            <div v-if="item.type == 3" class="notes">
              {{ item.data + " 退出群聊！" }}
            </div>
            <div v-if="item.type == 2">
              <!-- 是自己的 -->
              <div v-if="item.data.from == user.name">
                <span>{{ item.data.msg }}</span>
                <img
                  :src="require('@/assets/avatar/' + user.avatar)"
                  class="avatar"
                />
              </div>
              <!-- 不是自己的 -->
              <div v-else>
                <img
                  :src="require('@/assets/avatar/one.jpg')"
                  alt
                  class="avatar"
                />
                <p class="username">{{ item.data.from }}</p>
                <p class="content">{{ item.data.msg }}</p>
              </div>
            </div>
          </li>
        </ul>
      </div>

      <div class="sendMessage">
        <div class="icon">
          <span
            class="iconfont icon-smile"
            @click="emojiShow = !emojiShow"
          ></span>
          <div
            class="emoji"
            tabindex="1"
            v-show="emojiShow"
            @blur="handleEmojiBlur"
          >
            <span
              v-for="item in emojiList"
              :key="item.codes"
              @click="handleEmoji(item)"
              >{{ item.char }}</span
            >
          </div>
          <label class="iconfont icon-wenjianjia" for="file"></label>
          <input
            type="file"
            style="display: none"
            id="file"
            @change="handleFile"
          />
          <span class="iconfont icon-jietu" @click="handleCanvas"></span>
        </div>
        <textarea
          cols="80"
          rows="5"
          ref="textarea"
          @keyup.enter="handlePress"
          v-model="message.msg"
        ></textarea>
        <button class="sendMessage" @click="sendContentToServe">发送</button>
        <img :src="imgUrl" alt />
      </div>
    </div>
  </div>
</template>


<script setup>
import { defineProps, reactive, ref, watch } from "vue";
import SocketService from "@/utils/webSocket";
import getCurTime from "@/utils/time";
import { useStore } from "vuex";
import emoji from "../assets/emoji.json";
import { useRouter } from "vue-router";

let iconList = ref(["icon-liaotianqingqiu", "icon-yonghu"]);
let iconCurrentIndex = ref(0);
let joinRoom = ref([]);
let content = ref("");
let imgAllUrl = ref([]);

//头衔部分
let user = ref(JSON.parse(localStorage.getItem("user")));

//socket 推送部分
const store = useStore();
let socket = reactive({
  socketService: SocketService.Instance,
});
SocketService.Instance.connect(store.getters.GET_USERNAME);
socket.socketService = SocketService.Instance;
socket.socketService.registerCallBack("callback1", socket.socketService);

//socket 发送消息
let message = ref({
  msg: "",
  from: JSON.parse(localStorage.getItem("user")).name,
});
let sendContentToServe = () => {
  // 注意此处传入的是一个对象
  socket.socketService.send(message.value);
  console.log("发送成功");
  message.value.msg = "";
  handleScrollBottom();
};

//emoji表情
let emojiList = ref([]);
let emojiShow = ref(false);
emojiList.value = emoji;

let handleEmojiBlur = () => {
  emojiShow.value = false;
};
//选择emoji
let handleEmoji = (emoji) => {
  message.value.msg += emoji.char;
};

//文件上传 加图片预览
let imgUrl = ref("");
let handleFile = (e) => {
  alert("抱歉  使用base64会造成图片比例不支持 所以此功能暂未开发");
};

let handleCanvas = () => {
  alert("此功能暂未开发");
};

//刷新页面最下面
let textarea = ref();

let joinUs = ref(null);
let handleScrollBottom = () => {
  const ul = joinUs.value;
  ul.scrollTop = ul.scrollHeight;
};

let router = useRouter();
let logout = () => {
  localStorage.clear();
  socket.socketService.close();
  router.replace({ path: "/login" });
};

let list = reactive({
  list: [],
});
watch(
  () => store.state.totalList,
  (newVal, oldVal) => {
    setTimeout(() => {
      list.list = newVal;
      handleScrollBottom();
    }, 100);
  },
  { deep: true }
);
</script>

<style lang="less" scoped>
.Room {
  width: 900px;
  height: 500px;
  margin: 200px auto;
  display: flex;
  .room-left {
    background-color: #474574;
    width: 55px;
    display: flex;
    flex-direction: column;
    align-items: center;
    .icon-liaotianqingqiu,
    .icon-yonghu {
      font-size: 24px;
      padding-top: 10px;
      cursor: pointer;
    }
    .active {
      color: #ecf0f1;
    }
    img {
      width: 40px;
    }
  }
  .room-center {
    width: 200px;
    background-color: #e6e5e5;
    color: #000;
    display: flex;
    flex-direction: column;
    .center-h {
      padding: 9.6px 10px;
      height: 20px;
      border-bottom: 1px solid #e5e5e58c;
      box-shadow: 1px 1px 1px #b2c0c9;
      display: flex;
      align-items: center;
      img {
        width: 50px;
        height: 50px;
      }
    }
    .center-b {
      flex: 1;
      .user-item-name {
        padding: 5px 10px;
        height: 40px;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #e5e5e58c;
        box-shadow: 1px 1px 1px #2980b9;
        font-size: 17px;
      }
      .user-item {
        padding: 5px 10px;
        height: 40px;
        display: flex;
        align-items: center;
        img {
          width: 40px;
          height: 40px;
        }
        span {
          margin-left: 5px;
        }
      }
    }
  }
  .room-right {
    flex: 1;
    background-color: #f6f6f6;
    display: flex;
    flex-direction: column;
    .top_title {
      height: 40px;
      width: 100%;
      position: relative;
      .name {
        width: 100%;
        line-height: 40px;
        font-size: 16px;
        border-bottom: 1px solid rgba(100, 100, 100, 0.3);
        text-align: center;
      }
      .logout {
        position: absolute;
        top: 0;
        right: 10px;
        line-height: 40px;
        font-size: 30px;
        color: #aaa;
        cursor: pointer;
        &:hover {
          color: darkorange;
        }
      }
    }

    .chatcontent {
      height: 300px;
      .join {
        text-align: center;
        color: #ccc;
        overflow: auto;
        height: 300px;
        &::-webkit-scrollbar {
          display: none;
        }
        li {
          padding: 10px;
          .notes {
            display: block;
            text-align: center;
            font-size: 12px;
          }
        }
      }
      .my-message {
        display: flex;
        justify-content: flex-end;
        div {
          display: flex;
          position: relative;
          &::after {
            content: "";
            right: 38px;
            top: 50%;
            transform: translateY(-50%);
            position: absolute;
            border-left: 6px solid #9eea6a;
            border-top: 6px solid transparent;
            border-bottom: 6px solid transparent;
            border-right: 6px solid transparent;
          }
          .file {
            max-width: 330px;
            max-height: 170px;
            margin-right: 10px;
            cursor: pointer;
          }
          .avatar {
            width: 40px;
            height: 40px;
          }
          span {
            box-sizing: border-box;
            display: inline-block;
            border-radius: 5px;
            line-height: 32px;
            background-color: #9eea6a;
            color: #000;
            padding: 5px;
            margin-right: 10px;
            min-width: 40px;
          }
        }
      }
      .other-message {
        position: relative;
        display: flex;
        justify-content: flex-start;
        flex-direction: column-reverse;

        div {
          display: flex;
          position: relative;

          .file {
            max-width: 330px;
            max-height: 170px;
            margin-top: 14px;
            margin-left: 10px;
            cursor: pointer;
          }
          .avatar {
            width: 38px;
            height: 38px;
          }
          .username {
            position: absolute;
            left: 50px;
            top: -14px;
            font-size: 10px;
            color: #b2b2b2;
          }
          .content {
            margin-top: 3px;
            box-sizing: border-box;
            display: inline-block;
            border-radius: 5px;
            line-height: 28px;
            background-color: #fff;
            color: #000;
            padding: 6px;
            margin-left: 10px;
            border: 1px solid #ccc;
            min-width: 40px;
          }
        }
      }
    }
    .sendMessage {
      position: relative;
      flex: 1;
      background-color: #fff;
      padding-left: 10px;
      .icon {
        height: 25px;
        padding-top: 6px;
        display: flex;
        .icon-smile,
        .icon-wenjianjia,
        .icon-jietu {
          font-size: 20px;
          padding: 0 6px;
          cursor: pointer;
        }
        .icon-jietu {
          font-size: 23px !important;
        }
        .emoji {
          position: absolute;
          display: flex;
          flex-wrap: wrap;
          width: 276px;
          height: 218px;
          overflow: auto;
          bottom: 159px;
          background-color: #fff;
          border: 1px solid #cccccc;
          outline: none;
          span {
            padding: 7px;
            cursor: pointer;
          }
        }
      }
      textarea {
        border: none;
        resize: none;
        outline: none;
        font-size: 15px;
        padding-left: 9px;
      }
      .sendMessage {
        position: absolute;
        bottom: 10px;
        right: 10px;
        padding: 4px 10px;
        background-color: #f5f5f5;
        border: 1px solid #ccc;
      }
    }
  }
  .join {
    color: #333;
    font-size: 13px;
  }
  .send {
    background-color: #2ecc71;
    color: #000;
  }
  .receive {
    background-color: #fff;
    color: #000;
  }
  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 0.5s;
  }
  .fade-enter,
  .fade-leave-to {
    opacity: 0;
  }
}
</style>>